<template>
  <div ref="popW">
    <div class="popContent">
      <div class="font-lan-l mb-3">
        <div>
          地块：{{data.name?data.name:'暂无数据'}}
        </div>
        <div class="close" @click="closeWindow">
          <el-icon><CircleClose /></el-icon>
        </div>
      </div>
      <el-row >
        <div class="flexdiv">
          <span class="description">
            <img src="@/assets/img/dizhi.png" class="dizhi" alt="">
            
            地址：</span><span class="font-lan">{{data.address?data.address:'暂无数据'}}</span>
        </div>
        <div class="flexdiv">
          <span class="description">
            <img src="@/assets/img/mianji.png" class="dizhi" alt="">
            面积：</span><span class="font-lan">{{data.area?data.area+'亩':'暂无数据'}}</span>
        </div>
        <div class="flexdiv">
          <span class="description">
            <img src="@/assets/img/man.png" class="dizhi" alt="">
            负责人：</span><span class="font-lan">{{data.contacts?data.contacts:'暂无数据'}}</span>
        </div>
        <div class="flexdiv">
          <img src="@/assets/img/dianhua.png" class="dizhi" alt="">
          <span class="description">联系方式：</span><span class="font-lan">{{data.phone?data.phone:'暂无数据'}}</span>
        </div>
        <div class="flexdiv">
          <span class="description">
            <img src="@/assets/img/zuowu.png" class="dizhi" alt="">
            作物：</span><span class="font-lan">{{data.crop?data.crop:'暂无数据'}}</span>
        </div>
        <div class="flexdiv">
          <span class="description">
            <img src="@/assets/img/zuowu.png" class="dizhi" alt="">
            品种：</span><span class="font-lan">{{data.cropVariety?data.cropVariety:'暂无数据'}}</span>
        </div>
      </el-row>
      <div class="content5">
        <div class="left">
          <radar/>
        </div>
        <div class="right">
          <div class="top">
            <div class="t1">
              <div class="label">
                土壤等级:
              </div>
              <div class="zd">
                中等
              </div>
            </div>
            <div class="t1">
              <div class="label">
                地块星级:
              </div>
              <div class="star">
                <el-rate v-model="rateValue" />
              </div>
            </div>
          </div>
          <div v-if="data.solidLevel">
            <div class="bottom" v-for="(item,index) in data.solidLevel" :key="index">
              <div class="bchild">
                <img style="width:30px;height:30px;"  src="@/assets/img/sd.png" alt="">
                
                <div class="info">
                  <div class="info1">
                    <span class="bold">{{ item.Humidity }}%RH</span>
                    <span class="text3">
                      土壤湿度(-{{ item.CM }}cm)
                    </span>
                  
                  </div>
                </div>
              </div>
              <div class="bchild">
              
                <img style="width:30px;height:30px;" src="@/assets/img/wd.png" alt="">
                <div class="info">
                  <div class="info1">
                    <span class="bold">{{item.Temp}}℃</span>
                    <span class="text3">
                      土壤温度(-{{ item.CM }}cm)
                    </span>
                  
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <!-- <div class="content6">
        <div class="c6child" v-for="(item,index) in 6" :key="index">
          <div class="c22">
            <span>氮</span>
            <span>4.324g/Kg</span>
          </div>
          <div class="line">
            <div class="activeline"></div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted,watch } from "vue";
import radar from "@/chart/pieChart/radar";

// 声明类型
const PropsType = {
  data: {
    type: Object,
    default: {},
    require: true
  }
} as const
export default defineComponent({
  props: PropsType,
  components: {
    radar
  },
  setup(props, { emit }) {
    //变量
    const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
    const rateValue=ref(3)
    const solidData=reactive([
      {
        type:2,
        num:29.3,
        text:'土壤温度(-10cm)'
      },
      {
        type:1,
        num:29.3,
        text:'土壤温度(-20cm)'
      },
      {
        type:2,
        num:29.3,
        text:'土壤温度(-30cm)'
      },
      {
        type:1,
        num:29.3,
        text:'土壤湿度(-10cm)'
      },
      {
        type:2,
        num:29.3,
        text:'土壤湿度(-20cm)'
      },
      {
        type:1,
        num:29.3,
        text:'土壤湿度(-30cm)'
      },
    ])
    // 生命周期
    onMounted(() => {
      //
      
    });

    onUnmounted(() => {
      //
    });

    watch(
      () => props.data,
      (val: any) => {
        //
      },
      {
        immediate: true,
        deep: true
      }
    )

    //methods
    function closeWindow(){
      emit('closeWindow')
    }
    const getType = (data) =>{
      let type = ''
      switch(data){
        case '优秀':
          type = 'success'
          break;
        case '良好':
          type = ''
          break;
        case '中等':
          type = 'warning'
          break;
        case '较差':
          type = 'danger'
          break;
      }
      return type
    }

    // return
    return {
      colors,
      getType,
      rateValue,
      solidData,
      closeWindow
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.popContent{
  color:#fff;
  .content6{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .c6child{
      width: 48%;
      font-size: 13px;
    }
    .c22{
      display: flex;
      justify-content: space-between;
    }
    .line{
      position: relative;
      background: rgba(0, 102, 255, 0.30);
      height: 4px;
      border-radius: 3px;
      overflow: hidden;
      margin: 7px 0;
      .activeline{
        position: absolute;
        left: 0;
        height: 4px;
        width: 50%;
        top: 0;
        background: rgba(0, 102, 255, 1);
      }
    }
  }
  .content5{
    display: flex;
    align-items: center;
    .right{
      margin-left: 20px;
      .top{
        .star{
          margin-left: 5px;
        }
        .t1{
          display: flex;
          align-items: center;
          margin-top: 10px;
          .label{
            color: rgba(255, 255, 255, 0.60);
          }
          .zd{
            background: rgba(49, 127, 245, 1);
            color: #fff;
            padding: 1px 4px;
            border-radius: 5px;
            margin-left: 5px;
          }
        }
      }
    }
    .bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .bchild{
        width: 49.5%;
        display: flex;
        margin-bottom: 10px;
        .info1{
          display: flex;
          flex-direction: column;
          margin-left: 5px;
          .text3{
            color: rgba(198, 196, 204, 1);
            width: 140px;
            display: inline-block;
          }
        }
      }
    }
  }
  .flexdiv{
    margin-right: 10px;
  }
  .mb-1{
    display: flex;
    align-items: center;
    
  }
  
  .description{
    color: rgba(255, 255, 255, 0.60)!important;
  }
  .font-lan-m{
    position: relative;
    top: 0px;
  }
  .dizhi{
    position: relative;
    top: 3px;
  }
  .font-lan-l{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .close{

  }
  .description{
    font-size: 12px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    line-height: 16px;
    -webkit-background-clip: text;
  }
}
</style>
